<template>
  <div class="container">
    <div class="nav__container">
      <div class="nav__item" :class="{'nav__item--active': operateStatus === '5,6'}" @click="selectNav('5,6')">待结算</div>
      <div class="nav__item" :class="{'nav__item--active': operateStatus === '7'}" @click="selectNav('7')">已结算</div>
    </div>
    <ATable :table-title="tableTitle" :table-data="tableData" @operate="operateItem" class="table__contaienr"/>
    <div class="page_box" v-if="totalPage > 1">
      <page-bar :select="forward" :count="totalPage" :current="pageNumber"/>
    </div>
  </div>
</template>

<script>
import { ATable, PageBar } from '@/components';
import Api from '@/api';
import dayjs from 'dayjs';

export default {
  name: 'clearing',
  components: {
    ATable,
    PageBar
  },
  data() {
    return {
      operateStatus: '5,6',
      pageNumber: 1,
      totalPage: 1,
      tableTitle: [
        '项目名称',
        '股侠ID',
        '合买类型',
        '结束原因',
        '是否停盘',
        '未结算比例',
        '操盘结束日期',
        '应该结算日期',
        '操作'
      ],
      tableData: {
        list: [
          // [
          //   {
          //     value: '天下第一',
          //   },
          //   {
          //     value: '哈哈侠',
          //   },
          //   {
          //     value: '稳赢型',
          //   },
          //   {
          //     value: '2018.06.03',
          //   },
          //   {
          //     value: '2018.06.03',
          //   },
          // ]
        ],
        operate: {
          name: '结算'
        }
      },
      dataList: []
    };
  },
  created() {
    this.getSettleList();
  },
  methods: {
    selectNav(val) {
      this.operateStatus = val;
      this.pageNumber = 1;
      let operate = '结算';
      let title = [
        '项目名称',
        '股侠ID',
        '合买类型',
        '结束原因',
        '是否停盘',
        '未结算比例',
        '操盘结束日期',
        '应该结算日期',
        '操作'
      ];
      if (val != '5,6') {
        operate = '查看详情';
        title = [
          '项目名称',
          '股侠ID',
          '合买类型',
          '结束原因',
          '操盘结束日期',
          '应该结算日期',
          '操作'
        ];
      }
      const { tableData } = this;
      tableData.operate = {
        name: operate
      };
      this.tableTitle = title;
      this.tableData = tableData;
      this.getSettleList();
    },
    getSettleList() {
      const { pageNumber, operateStatus } = this;
      Api.getSettleList({
        operateStatus,
        pageNumber: pageNumber - 1,
        pageSize: 10
      }).then(res => {
        this.totalPage = res.data.totalPage;
        const { projectList } = res.data;
        if (!projectList) {
          this.tableData.list = [];
          this.dataList = [];
          return;
        }
        this.tableData.list = projectList.map(val => {
          let content = [];
          if (operateStatus == 7) {
            content = [
              {
                value: val.name
              },
              {
                value: val.operaterName
              },
              {
                value: val.type
              },
              {
                value: val.finishStatus
              },
              {
                value: !val.endTime ? '-' : this.formatDay(val.endTime)
              },
              {
                value: !val.settleTime ? '-' : this.formatDay(val.settleTime)
              }
            ];
          } else {
            content = [
              {
                value: val.name
              },
              {
                value: val.operaterName
              },
              {
                value: val.type
              },
              {
                value: val.finishStatus
              },
              {
                value: val.operateStatus == 5 ? '是' : '否'
              },
              {
                value: val.unSettleRate + '%'
              },
              {
                value: !val.endTime ? '-' : this.formatDay(val.endTime)
              },
              {
                value: !val.settleTime ? '-' : this.formatDay(val.settleTime)
              }
            ];
          }
          return content;
        });
        this.dataList = projectList;
      });
    },
    operateItem(val) {
      const { dataList } = this;
      const item = dataList[val];
      if (item.operateStatus == 5) {
        this.$router.push({
          name: 'suspension',
          params: { id: item.projectId }
        });
      } else if (item.operateStatus == 6) {
        this.$router.push({
          name: 'clearingdetail',
          params: { id: item.projectId, amount: item.raiseAmount, type: '1' }
        });
      } else {
        this.$router.push({
          name: 'clearingdetail',
          params: { id: item.projectId, amount: item.raiseAmount, type: '0' }
        });
      }
    },
    forward(pageNo) {
      console.log('pageNo', pageNo);
      this.pageNumber = pageNo;
      this.getSettleList();
    },
    formatDay(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm');
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav__container {
  display: flex;
  margin-bottom: 20px;
  height: 35px;
  min-height: 35px;
}

.nav__item {
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border-bottom: 5px solid red;
  background: #fff;
}

.nav__item--active {
  background: red;
  color: #ffffff;
}

.page_box {
  display: flex;
  justify-content: center;
}

.table__contaienr {
  flex: 1;
}
</style>
